<template>
	<view class="task_giftinfo_page">
		<view class="giftinfo_img_box">
			<swiper class="swiper_box" circular :indicator-dots="false" :autoplay="false">
				<swiper-item v-for="(item,index) in info.img" :key="index">
					<image class="giftinfo_img" :src="picUrl+item" @click="previewImage(index)" mode="aspectFill">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<view class="giftinfo_title ellipsis-4">{{info.name}}</view>
		<view class="giftinfo_price">{{info.price}}L油滴兑换</view>
		<view class="mt-10 c-999999 f-13" style="margin-left: 28rpx;">库存:{{info.number}}</view>
		<view class="giftinfo_info">
			<view class="">兑换方式</view>
			<view class="c-999999 mt-10">{{info.exchange_type}}</view>
			<!-- <view class="mt-20">兑换条件</view>
			<view class="c-999999 mt-10">7天内发货 | 线上发货</view> -->
		</view>
		<view v-if="info.number==0" class="group_public_btn_block_def mt-20">{{info.number_text}}</view>
		<view v-else>
			<view v-if="info.border_status==1" class="group_public_btn_block_none mt-20">已兑换</view>
			<view v-else>
				<view v-if="integral<info.price" class="group_public_btn_block_none mt-20">油滴不足</view>
				<view v-else class="group_public_btn_block mt-20" @click="goGiftOrder">立即兑换</view>
			</view>
		</view>
		<view class="c-00A0DC mt-10 f-13 text-c" @click="goTaskIndex">获取更多油滴 ></view>
	</view>
</template>

<script>
	import {
		getTaskGoodsInfo,
		shopIntegralPay,
		getDefaultShopAddr,
		getGroupUserInfo
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: {},
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				integral: uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').integral : 0,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.getTaskGoodsInfo()
				this.integral = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').integral : 0
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			this.goods_id = options.scene
			uni.showLoading({})
			this.getTaskGoodsInfo()
			var params = {
				event_code: '礼品详情',
				path: 'pages/taskcentre/giftinfo',
				event_id: '',
				title: '',
				source_page: '礼品详情',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getTaskGoodsInfo() {
				getTaskGoodsInfo({
					goods_id: this.goods_id
				}).then(res => {
					if (res.state == 1) {
						uni.hideLoading()
						this.info = res.data.info
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			goGiftOrder() {
				if (uni.getStorageSync('access_token')) {
					if (this.info.type == 1) {
						uni.setStorage({
							key: 'taskGoodsInfo',
							data: this.info
						})
						uni.navigateTo({
							url: '/pages/taskcentre/giftorder'
						})
					} else {
						var that = this
						uni.showModal({
							content: '确定要兑换此商品吗？',
							confirmText: '确定',
							cancelText: "取消",
							success: function(res) {
								if (res.confirm) {
									shopIntegralPay({
										goods_id: that.info.goods_id,
										number: 1,
									}).then(res => {
										if (res.state == 1) {
											var order_id = res.data.order_id
											uni.redirectTo({
												url: '/pages/taskcentre/giftorderinfo?order_id=' +
													order_id + '&isShow=1'
											})
											that.getGroupUserInfo()
										} else {
											uni.hideLoading()
											uni.showToast({
												title: res.error[0],
												mask: true,
												icon: 'none',
												duration: 1500
											})
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				var params = {
					event_code: '礼品详情',
					path: 'pages/taskcentre/giftinfo',
					event_id: '',
					title: '',
					source_page: '礼品详情-立即兑换',
					value: '',
				}
				app.BurialPoint(params)
			},
			goTaskIndex() {
				uni.navigateTo({
					url: '/pages/taskcentre/index'
				})
				var params = {
					event_code: '礼品详情',
					path: 'pages/taskcentre/giftinfo',
					event_id: '',
					title: '',
					source_page: '礼品详情-获取更多油滴',
					value: '',
				}
				app.BurialPoint(params)
			},
			previewImage(index) {
				var that = this
				var list = that.info.img
				var urlist = []
				urlist = list.map(function(item) {
					return that.picUrl + item;
				});
				uni.previewImage({
					current: index,
					urls: urlist
				});
			},
			getGroupUserInfo() {
				getGroupUserInfo({
					user_id: uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').user_id : ''
				}).then(res => {
					if (res.state == 1) {
						uni.setStorage({
							key: 'userinfo',
							data: res.data.list,
						});
					} else {
						uni.removeStorage({
							key: 'access_token'
						})
					}
				})
			},
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {

			}
		},
		onShareTimeline: function() {
			app.getShareTask()
			return {

			}
		},
	}
</script>

<style lang="scss">
	.task_giftinfo_page {
		padding: 50rpx;

		.giftinfo_img_box {
			width: 100%;
			height: 650rpx;
			border-radius: 8rpx;
			background-color: #F1F1F1;

			.swiper_box {
				width: 100%;
				height: 650rpx;


				swiper-item {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.giftinfo_img {
					width: 100%;
					height: 650rpx;
				}
			}
		}

		.giftinfo_title {
			color: #000000;
			font-size: 30rpx;
			font-weight: bold;
			margin-top: 40rpx;
			padding: 0 28rpx;
		}

		.giftinfo_price {
			color: #00A0DC;
			font-size: 26rpx;
			margin-top: 20rpx;
			padding: 0 28rpx;
		}

		.giftinfo_info {
			font-size: 24rpx;
			padding: 30rpx;
			margin-top: 40rpx;
			border-radius: 8rpx;
			border: 1rpx solid #F1F1F1;
		}

		.group_public_btn_block_none {
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			color: #00A0DC;
			padding: 30rpx 0;
			border-radius: 8rpx;
			background-color: #E8F2F6;
		}

		.group_public_btn_block_def {
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			color: #FFFFFF;
			padding: 30rpx 0;
			border-radius: 8rpx;
			background-color: #C5C5C5;
		}
	}
</style>